<template>
    <div class="form-page">
        <el-form
            ref="dataForm"
            :model="dataForm"
            :rules="dataFormRule"
            :inline="true"
            label-width="10em"
            class="data-form"
        >
            <div class="form-item xy-start al-str">
                <div class="title">基础设置</div>
                <div class="yx-start al-start data">
                    <el-form-item prop="name" label="名称">
                        <el-input
                            v-model="dataForm.name"
                            placeholder="考试名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime">
                        <el-date-picker
                            v-model="dataForm.startTime"
                            type="datetime"
                            placeholder="选择开始时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker
                            v-model="dataForm.endTime"
                            type="datetime"
                            placeholder="选择结束时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item label="考试时长" prop="answerTime">
                        <el-input
                            v-model.number="dataForm.answerTime"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="考试次数" prop="answerCount">
                        <el-input
                            v-model.number="dataForm.answerCount"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="组卷方式" prop="ruleType">
                        <el-radio
                            v-model="dataForm.ruleType"
                            :disabled="!dataForm.addAction"
                            label="choose"
                            >选题组卷</el-radio
                        >
                        <el-radio
                            v-model="dataForm.ruleType"
                            :disabled="!dataForm.addAction"
                            label="random"
                            >随机组卷</el-radio
                        >
                        <el-radio
                            v-model="dataForm.ruleType"
                            :disabled="!dataForm.addAction"
                            label="select"
                            >抽题组卷</el-radio
                        >
                    </el-form-item>
                    <el-form-item prop="classificationId" label="学科">
                        <div class="xy-center">
                            <el-cascader
                                v-model="dataForm.classificationId"
                                v-loading="flag.classfication"
                                placeholder="请选择学科"
                                :disabled="dataForm.released"
                                :options="classificationInfo"
                                :show-all-levels="false"
                                filterable
                                clearable
                                :props="{
                                    value: 'id',
                                    label: 'name',
                                    emitPath: false,
                                    checkStrictly: true
                                }"
                            ></el-cascader>
                        </div>
                    </el-form-item>

                    <!--                    <el-form-item label="考试说明" prop="remark">-->
                    <!--                        <el-input-->
                    <!--                            v-model="dataForm.remark"-->
                    <!--                            type="textarea"-->
                    <!--                            :rows="3"-->
                    <!--                        ></el-input>-->
                    <!--                    </el-form-item>-->
                </div>
                <el-form-item label="考试说明" prop="remark">
                    <el-input
                        v-model="dataForm.remark"
                        type="textarea"
                        style="width: 1000px"
                        :autosize="{ minRows: 8, maxRows: 12 }"
                    ></el-input>
                </el-form-item>
            </div>
            <div class="form-item xy-start al-str">
                <div class="title">防作弊设置</div>
                <div class="yx-start al-start data">
                    <div class="limit">
                        <el-checkbox
                            v-model="examLimit.answerPaste"
                            label="限制答案粘贴"
                            class="set"
                        ></el-checkbox>
                        <el-checkbox
                            v-model="examLimit.limitMultipleSevers"
                            label="限制多台设备答题"
                            class="set"
                        ></el-checkbox>
                        <el-checkbox
                            v-model="examLimit.screenMustSubmit"
                            label="切屏后强制交卷"
                            class="set"
                        ></el-checkbox>
                        <br />
                        <el-checkbox
                            v-model="examLimit.noDoMustSubimit"
                            label="无操作强制交卷"
                            class="set"
                        ></el-checkbox>
                        <div
                            v-if="examLimit.screenMustSubmit"
                            style="padding: .2rem;color: #868ea1;margin: 0 .1rem;font-size: 14px;
}"
                        >
                            <span>学员切换页面超过 </span
                            ><input
                                v-model="examLimit.screenCount"
                                style="width: 1.5rem"
                            />
                            <span> 次后将被强制交卷，切换到其他</span>页面
                            <input
                                v-model="examLimit.screenTime"
                                style="width: 2rem"
                            /><span>秒后即判定为切屏</span>
                        </div>
                        <div
                            v-if="examLimit.noDoMustSubimit"
                            style="padding: .2rem;color: #868ea1;margin: 0 .1rem;font-size: 14px;
}"
                        >
                            <span>答题时超过 </span
                            ><input
                                v-model="examLimit.limitTime"
                                style="width: 1.5rem"
                            />
                            <span> 秒没有操作会强制交卷</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--            <div class="form-item xy-start al-str">-->
            <!--                <div class="title">登录信息</div>-->
            <!--                <div class="yx-start al-start data">-->
            <!--                    <el-form-item prop="password" label="密码">-->
            <!--                        <el-input-->
            <!--                            v-model="form.password"-->
            <!--                            type="password"-->
            <!--                        ></el-input>-->
            <!--                    </el-form-item>-->
            <!--                    <el-form-item prop="checkPass" label="确认密码">-->
            <!--                        <el-input-->
            <!--                            v-model="form.checkPass"-->
            <!--                            type="password"-->
            <!--                        ></el-input>-->
            <!--                    </el-form-item>-->
            <!--                </div>-->
            <!--            </div>-->
        </el-form>
        <div ref="submitDiv" class="form-item xy-center from-operation">
            <el-button
                type="primary"
                icon="el-icon-folder"
                :loading="submitFlag"
                @click="save(false)"
                >保存
            </el-button>
            <el-button
                type="primary"
                icon="el-icon-folder"
                :loading="submitFlag"
                :disabled="dataForm.released"
                @click="save(true)"
                >保存并下一步
            </el-button>
            <el-button
                type="warning"
                icon="el-icon-delete-solid"
                :loading="submitFlag"
                @click="cancle()"
                >取消
            </el-button>
        </div>
    </div>
</template>

<script>
import { FormPage, TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree } from "@/utils/index.js";
import {
    fetchCourseList,
    fetchClassesAll,
    fetchClassificationList2
} from "@/api/course";
import { fetchExamId } from "@/api/exam";
export default {
    name: "AddExamNormal",
    components: {},
    mixins: [FormPage, TablePage],
    data() {
        return {
            dataForm: {
                paperType: "normalExam",
                joinType: "all",
                answerCount: 1,
                cheat: {}
            },
            initForm: {
                paperType: "normalExam",
                joinType: "all",
                answerCount: 1,
                cheat: {}
            },
            examLimit: {
                answerPaste: false,
                limitMultipleSevers: false,
                screenMustSubmit: false,
                noDoMustSubimit: false,
                screenTime: "",
                screenCount: "",
                limitTime: ""
            },
            from: false,
            key: 0,
            classificationProps: {
                lazy: true,
                checkStrictly: true,
                emitPath: false,
                lazyLoad: this.getClassification
            },
            flag: {
                classfication: false,
                course: false,
                chapter: false,
                nextResources: false,
                depInfo: false
            },
            courseQueryData: {
                size: 1000,
                courseSubjectId: ""
            },
            chapterQueryData: {
                size: 1000,
                baseCourseId: ""
            },
            classficationQueryData: {
                size: 1000
            },
            currentClassificationId: null,
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入考试名称",
                        trigger: "blur"
                    }
                ],

                paperType: [
                    {
                        required: true,
                        message: "请选择考试类型",
                        trigger: "change"
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: "请选择开始时间",
                        trigger: "change"
                    }
                ],
                endTime: [
                    {
                        required: true,
                        message: "请选择结束时间",
                        trigger: "change"
                    }
                ],
                answerTime: [
                    {
                        required: true,
                        message: "请输入考试耗时",
                        trigger: "blur"
                    },
                    { type: "number", message: "必须为数字值" }
                ],
                answerCount: [
                    {
                        required: true,
                        message: "请输入考试次数",
                        trigger: "blur"
                    },
                    { type: "number", message: "必须为数字值" }
                ],
                ruleType: [
                    {
                        required: true,
                        message: "请选择组卷方式",
                        trigger: "change"
                    }
                ],
                courseId: [
                    { required: true, message: "请选择课程", trigger: "change" }
                ],
                // classificationId: [
                //     {required: true, message: "请选择科目", trigger: "change"}
                // ],
                // classIds: [
                //     {required: true, message: "请选择班级", trigger: "change"}
                // ],
                isFinalExam: [
                    { required: true, message: "考试类型", trigger: "change" }
                ]
            },
            courseInfo: [],
            chapterInfo: [],
            classificationInfo: [],
            nextResourcesInfo: [],
            depInfo: []
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.paperType,
            joinType: state => state.status.joinType,
            ruleType: state => state.status.ruleType
        })
    },
    watch: {
        // "dataForm.classificationId"(value) {
        //     this.handleClassficationId(value);
        // },
        // "dataForm.courseId"(value) {
        //     this.handleCourseId(value);
        // },
        $route: function(to, from) {
            this.initdata();
        }
    },
    mounted() {
        this.initdata();
    },
    methods: {
        initdata() {
            if (this.$route.query.examId) {
                if (this.$route.query.from) {
                    this.from = true;
                }
                this.dataForm.addAction = false;
                fetchExamId({ id: this.$route.query.examId }).then(res => {
                    this.dataForm = res;
                    this.examLimit = {
                        answerPaste: (res.cheat || {}).answerPaste,
                        limitMultipleSevers: (res.cheat || {})
                            .limitMultipleSevers,
                        screenMustSubmit: (res.cheat || {}).screenMustSubmit,
                        noDoMustSubimit: (res.cheat || {}).noDoMustSubimit,
                        limitTime: (res.cheat || {}).limitTime || 60,
                        screenCount: (res.cheat || {}).screenCount || 3,
                        screenTime: (res.cheat || {}).screenTime || 10
                    };
                    if (res.classificationId) {
                        this.handleClassficationId(
                            this.dataForm.classificationId
                        );
                    }
                    if (res.courseId) {
                        this.handleCourseId(this.dataForm.courseId);
                    }
                });
            } else {
                this.dataForm.addAction = true;
            }
        },
        //获取选中学科 查询课程
        handleClassficationId(value) {
            this.courseInfo = null;
            if (!value) {
                return;
            }
            this.flag.course = true;
            this.courseQueryData.courseSubjectId = value;
            fetchCourseList(this.courseQueryData, "查询课程信息异常").then(
                res => {
                    this.courseInfo = treeList2Tree(res);
                    this.flag.course = false;
                }
            );
        },
        handleCourseId(value) {
            this.depInfo = null;
            this.dataForm.classIds = null;
            if (!value) {
                return;
            }
            this.flag.depInfo = true;
            fetchClassesAll({ courseBaseId: value }, "查询班级信息异常").then(
                res => {
                    this.depInfo = res;
                    this.flag.depInfo = false;
                }
            );
        },
        getClassfication() {
            fetchClassificationList2(this.classficationQueryData).then(res => {
                this.classificationInfo = treeList2Tree(res);
            });
        },
        async loadData() {
            return Promise.all([this.getClassfication()]).catch(e => {
                this.$message.error("数据加载失败，请稍后在试");
            });
        },

        save(flag) {
            (this.dataForm.cheat = {
                answerPaste: this.examLimit.answerPaste,
                limitMultipleSevers: this.examLimit.limitMultipleSevers,
                screenMustSubmit: this.examLimit.screenMustSubmit,
                noDoMustSubimit: this.examLimit.noDoMustSubimit,
                limitTime: this.examLimit.limitTime,
                screenCount: this.examLimit.screenCount,
                screenTime: this.examLimit.screenTime
            }),
            this.formDataSave("/exam/exam/update").then(res => {
                if (flag) {
                    this.$store.dispatch("tagsView/delView", this.$route);
                    this.$router.replace({
                        name: "ExamPaperRe",
                        query: {
                            examId: res.id,
                            ruleType: res.ruleType,
                            paperType: res.paperType
                        }
                    });
                } else {
                    this.$store.dispatch("tagsView/delView", this.$route);
                    // this.$router.go(-1)
                    if (this.from) {
                        this.$router.replace({ name: "GroupExamNormal" });
                    } else {
                        this.$router.replace({ name: "SelfExamNormal" });
                    }
                }
            });
        },
        cancle() {
            this.dataForm = this.initForm;
            this.$store.dispatch("tagsView/delView", this.$route);
            // this.$router.go(-1)
            if (this.from) {
                this.$router.replace({ name: "GroupExamNormal" });
            } else {
                this.$router.replace({ name: "SelfExamNormal" });
            }
        }
    }
};
</script>

<style lang="css" scoped>
.limit {
    padding: 0 0 0 1.25rem;
    position: relative;
}

.set {
    margin-right: 4.17rem;
    margin-bottom: 1.58rem;
}
</style>
